<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet"
        href="https://at.alicdn.com/t/font_2802339_75bm3n29x44.css?spm=a313x.7781069.1998910419.42&file=font_2802339_75bm3n29x44.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/interface.js"></script>
    <script src="../js/cookie.js"></script>
    <script src="../js/goodsdetail.js"></script>
    <link rel="stylesheet" href="../css/ui-base.css">
    <link rel="stylesheet" href="../css/detail.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .w {
            width: 1226px;
            margin: 0 auto;
        }

        .tips {
            width: 1226px;
            margin: 0 auto;
            background-color: orange;
            color: white;
        }

        .cl::after {
            content: "";
            display: block;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }

        .tips a {
            font-size: 14px;
        }


        .wrapAll {
            margin-top: 100px;
            /* background-color: grey; */
        }

        .wrapInner {
            width: 400px;
            height: 400px;
            border: 1px solid #333;
            position: relative;
        }

        .wrapInner img {
            width: 100%;
            height: 100%;
        }

        .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            display: none;

        }

        .left {
            width: 400px;
            float: left;
            margin-right: 50px;
        }

        .right {
            overflow: hidden;
            min-height: 400px;
            padding: 0 10px;
        }

        .scaleBar {
            width: 400px;
            height: 400px;
            background-color: rgba(122, 255, 255, 0.6);
            position: relative;
            /* overflow: hidden; */
            display: none;
        }

        .scaleBar img {
            position: absolute;
            /* z-index: -1; */
            width: 800px;
            height: 800px;
        }

        .goodsInfo {
            font-size: 12px;
        }

        .goodsInfo .sku-name {
            font-weight: bolder;
            font-size: 16px;
        }

        .goodsInfo>* {
            margin-top: 5px;
        }

        .switchList {
            display: flex;
            margin-top: 10px;
            padding: 5px auto;
        }

        .switchList li {
            flex: 1;
        }

        .switchList li+li {
            margin-left: 10px;
        }

        .switchList li img {
            width: 100%;
        }

        .active {
            border: 1px solid orangered;
        }

        .right>.goodsInfo>.series>div:nth-of-type(2)>.active1 {
            border: 2px solid orangered;
        }

        .right>.goodsInfo>.sku-name {
            color: black;
            font-weight: bold;
            font-size: 18px;
            text-indent: 32px;
            margin-bottom: 10px;
        }

        .right>.goodsInfo>.sku-e {
            color: orangered;
            font-size: 14px;
        }

        .right>.goodsInfo>.summary {
            margin-top: 20px;
            display: flex;
        }

        .right>.goodsInfo>.summary>div:nth-of-type(2)>span:nth-of-type(1) {
            font-size: 18px;
            color: red;
            font-weight: bold;
        }

        .right>.goodsInfo>.summary>div:nth-of-type(2) {
            font-size: 16px;
            color: black;
            margin-left: 30px;
        }

        .right>.goodsInfo>.summary>div:nth-of-type(2)>p>.q1 {
            display: block;
            font-size: 12px;
            color: grey;
            margin: 10px 0px;
        }

        .right>.goodsInfo>.summary>div:nth-of-type(2)>p>span:nth-of-type(2)>a {
            color: blue;
            font-size: 12px;
        }

        .right>.goodsInfo>.decilne {
            margin-top: 20px;
            display: flex;
        }

        .right>.goodsInfo>.decilne>div:nth-of-type(2) {
            margin-left: 30px;
        }

        .right>.goodsInfo>.decilne>div:nth-of-type(2)>p>a {
            color: blue;
            margin-left: 10px;
        }

        .right>.goodsInfo>.desro {
            margin-top: 20px;
            display: flex;
        }

        .right>.goodsInfo>.desro>div:nth-of-type(2) {
            font-size: 12px;
            color: grey;
            margin-left: 30px;
        }

        .right>.goodsInfo>.desro>div:nth-of-type(2)>p:nth-of-type(2) {
            color: orangered;
        }

        .right>.goodsInfo>.series {
            margin-top: 20px;
            display: flex;
        }

        .right>.goodsInfo>.series>div:nth-of-type(1) {
            width: 5%;
        }

        .right>.goodsInfo>.series>div:nth-of-type(2) {
            margin-left: 30px;
            display: flex;
            flex-wrap: wrap;
        }

        .right>.goodsInfo>.series>div:nth-of-type(2)>p {
            margin-right: 30px;
            margin-bottom: 10px;
            width: 40%;
            height: 30px;
            line-height: 30px;
            border: 1px solid grey;
        }

        .right>.goodsInfo>.series>div:nth-of-type(2)>p>img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
        }

        .right {
            height: 600px;
        }

        .right>.goodsInfo>.num-input {
            margin-top: 20px;
            display: flex;
        }

        .right>.goodsInfo>.num-input>div:nth-of-type(2) {
            margin-left: 30px;
        }

        .right>.goodsInfo>.num-input>div:nth-of-type(2)>input {
            width: 50px;
            text-align: center;
            height: 30px;
        }

        .right>.goodsInfo>.num-input>div:nth-of-type(2)>a {
            display: inline-block;
            border: 1px solid grey;
            width: 15px;
            height: 25px;
            line-height: 25px;
            text-align: center;
        }

        .right>.goodsInfo>.buy {
            width: 100%;
            text-align: center;
        }

        .right>.goodsInfo>.buy>button:nth-of-type(1) {
            width: 150px;
            height: 40px;
            background-color: #663200;
            border-radius: 5px;
            border: 0px;
        }

        .right>.goodsInfo>.buy>button:nth-of-type(2) {
            width: 150px;
            height: 40px;
            background-color: #FF5500;
            border-radius: 5px;
            margin-left: 20px;
            border: 0px;
        }

        .scaleBar {
            width: 500px;
            height: 500px;
            overflow: hidden;
        }

        .scaleBar>img {
            width: 1000px;
            height: 1000px;
            top: 0px;
        }

        .wrapAll>.right {
            position: relative;
        }

        .wrapAll>.right>.scaleBar {
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .addshop {
            position: fixed;
            top: 600px;
            right: 100px;
            width: 100px;
            height: 30px;
            background-color: #F8F8F8;
            text-align: center;
            font-size: 16px;
            line-height: 30px;
            border: 1px solid grey;
        }

        .addshop:hover {
            background-color: orangered;
        }

        .addshop:hover a {
            color: white;
        }

        .searchList {
            width: 450px;
            position: absolute;
            top: 80px;
            background-color: white;
            z-index: 9999;
            border: 1px solid grey;
            display: none;
        }

        .searchList li {
            line-height: 32px;
            text-indent: 10px;
            font-size: 14px;
            color: black;
        }

        .searchList li:hover {
            color: white;
            background-color: skyblue;

        }
    </style>
    <link rel="stylesheet" href="../css/goodsdetail.css">
</head>

<body>
    <header>
        <div class="header">
            <div class="left">
                <ul class="heardeleft">
                    <a href="./index.html">
                        <li>返回首页</li>
                    </a>
                    <li>网站导航</li>
                    <li>商家入驻</li>
                    <li>客户服务</li>
                    <li>网页无障碍</li>
                </ul>
                <span class="iconfont">&#xe645;</span>
                <select>
                    <option value="武汉">武汉</option>
                    <option value="郑州">郑州</option>
                </select>
            </div>
            <div class="right">
                <ul>
                    <div class="show">
                        <a href="javascript:;" class="login">
                            <li>请登录</li>
                        </a>
                        <a href="./resigter.html">
                            <li>注册有礼</li>
                        </a>
                    </div>
                    <div class="hide">
                        <a href="javascript:;" class="tip">欢迎:xxx</a>
                        <a href="javascript:;" class="a1">退出</a><br>
                    </div>
                    <li>我的订单</li>
                    <li>我的易购</li>
                    <li>苏宁会员</li>
                    <a href="javascript:;">
                        <li class="shoptocar">购物车</li>
                    </a>
                    <li>易付宝</li>
                    <li>企业采购</li>
                    <li>手机苏宁</li>
                </ul>
            </div>
        </div>
    </header>
    <div id="nav">
        <nav>
            <div class="navleft">
                <img src="../img/159642507148437980.png" alt="">
            </div>
            <div class="navright">
                <input type="text" placeholder="商品搜索" class="searchCon">
                <ul class="searchList"></ul>
                <button class="searchBtn">搜索</button>
                <div class="navlist">
                    <ul>
                        <li>奶粉特惠购</li>
                        <li>品质家具购</li>
                        <li>风管机</li>
                        <li>手机</li>
                        <li>冰箱</li>
                        <li>电视</li>
                        <li>空调</li>
                        <li>空调热卖抢</li>
                        <li>取暖器</li>
                    </ul>
                </div>
            </div>
        </nav>
    </div>

    <div class="wrapAll w cl">
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>
    <div class="goodsDetail w">
    </div>
    <div class="addshop">
        <a href="javascript:;">继续购物</a>
    </div>
</body>
<script>

    $(".searchCon").on("input", function () {
        $(".searchList").css({ display: 'block' })
        var key = $(".searchCon").val();
        // 即时搜索功能=>每次输入关键词=>重新请求
        // 解决方法:动态生成script标签=>设置请求的路径=>当script标签放到页面中时会向src中接口发送请求=>接收返回的jsonp格式的数据
        var script = document.createElement("script")
        script.src = `https://suggest.taobao.com/sug?code=utf-8&q=${key}&_ksTS=1637032362137_481&callback=dong&k=1&area=c2c&bucketid=14`
        document.body.append(script);
        script.onload = function () {//请求成功=>数据=>等脚本中的数据载入完毕=>删除脚本
            script.remove();
        }

    })
    $(".searchCon").focus(function () {
        $(".searchList").css({ display: 'block' })
    })
    $(".searchCon").blur(function () {
        $(".searchList").css({ display: 'none' })
    })

    function dong(data) {
        var { result } = data
        var html = "";
        result.forEach(([q]) => {
            html += `<li>${q}</li>`
        })
        $(".searchList").html(html);
    }

</script>

</html>